<template>
  <j-modal
    switchFullscreen
    :width="1200"
    :title="title"
    :visible="visible"
    @cancel="handleCancel"
    @ok="handleOk"

    :confirmLoading="confirmLoading">
    <template slot="footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button @click="handleOk">保存</a-button>
      <a-button type="primary" @click="handleOk" v-if="disableSubmit">已处理</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :md="8" :sm="32">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="经销商编号"
            >
              <a-input :disabled="disableSubmit" placeholder="请输入"
                       v-decorator="['customerCode',validatorRules.customerCode ]" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="经销商名称"
            >
              <a-input :disabled="disableSubmit" placeholder="请输入" v-decorator="['customerName', ]" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="组织编号"
            >
              <a-input :disabled="disableSubmit" placeholder="请输入" v-decorator="['orgCode', ]" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="组织名称"
            >
              <a-input :disabled="disableSubmit" placeholder="请输入" v-decorator="['orgName', ]" />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
              label='问题类别'
              >
              <cn-dict-select-tag
                dict-code='feedbackType'
                placeholder='请选择'
                triggerChange
                :disabled='disableSubmit'
                :options="{value:'dictDataCode',label:'dictDataDesc'}"
                v-decorator.trim="[ 'feedbackType']" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="订单编号"
            >
              <a-input :disabled="disableSubmit" placeholder="请输入" v-decorator="['orderCode', ]" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="负责人编号"
            >
              <a-input :disabled="disableSubmit" placeholder="请输入" v-decorator="['userName', ]" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="经销商负责人"
            >
              <a-input :disabled="disableSubmit" placeholder="请输入" v-decorator="['realName', ]" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="提交时间"
            >
              <a-input :disabled="disableSubmit" placeholder="请输入" v-decorator="['createTime', ]" />
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item
              :labelCol="{
                xs: { span: 6 },
                sm: { span: '7-24' }
              }"
              :wrapperCol=" {
                xs: { span: 24 },
                sm: { span: '16-24' }
              }"
              label="问题详情"
            >
              <a-textarea placeholder="请输入" v-decorator="['content', ]" />
            </a-form-item>
          </a-col>


          <a-col :md="24" :sm="24">
            <a-form-item
              :labelCol="{
                xs: { span: 6 },
                sm: { span: '7-24' }
              }"
              :wrapperCol=" {
                xs: { span: 24 },
                sm: { span: '16-24' }
              }"
              label="回复信息"
            >
              <a-textarea placeholder="请输入回复" v-decorator="['replyMessage', ]" />
            </a-form-item>
          </a-col>

        </a-row>
      </a-form>
    </a-spin>
    <!--    <proChose ref="prochoose" @okbro="okbropro"></proChose>-->
  </j-modal>
</template>

<script>
import { pick } from 'lodash'
import JUpload from '../../../../components/cn-form/JUpload'
import { getAction, postAction } from '@/api/manage'
import myShuttleModal from '../../../../components/cn-components/CnShuttleModal'
import HUpload from '@/components/cn-components/Hupload'

export default {
  name: 'feedbackModal',
  components: { myShuttleModal, HUpload, JUpload },
  data() {
    return {
      disableSubmit: false,
      disableSubmits: false,
      title: '',
      showType: 0,
      dataRange: '',
      confirmLoading: false,
      form: this.$form.createForm(this),
      model: {},
      visible: false,
      /* 数据源 */
      dataSource: [],
      dataSource2: [],
      fileList: [],
      /* table选中keys*/
      selectedRowKeys: [],
      /* table选中records*/
      selectionRows: [],
      selectedRowKeys2: [],
      /* table选中records*/
      selectionRows2: [],
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        }
      },
      ipagination2: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        }
      },

      loading: false,
      labelCol: {
        xs: { span: 6 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      url: {
        sendOrder: window._CONFIG['domianURL'] + '/feedback/cnFeedback/saveOrUpdate',
        queryById: window._CONFIG['domianURL'] + '/feedback/cnFeedback/getInfo'
      },
      validatorRules: {
        title: {
          rules: [
            { required: true, message: '' }
          ]
        },
        dataRange: {
          rules: [
            { required: true, message: '' }
          ]
        },
        remarks: {
          rules: [
            { required: true, message: '' }
          ]
        }
      }
    }

  },
  methods: {
    dateRangeChange(date, name) {
      this.model.startDate = name[0]
      this.model.endDate = name[1]
    },
    cutType(key) {
      if (key == '1') {
        this.showType = false
      } else {
        this.showType = true
      }
    },
    handleAdd() {
      if (this.showType) {
        this.dataSource2.forEach(item => {
          this.$refs.cusShuttleModal.dataSource2.push({ customerName: item.name, customerCode: item.code })
        })
        this.$refs.cusShuttleModal.visible = true
        this.$refs.cusShuttleModal.loadData()
      } else {
        this.dataSource.forEach(item => {
          this.$refs.orgShuttleModal.dataSource2.push({ orgName: item.name, orgCode: item.code })
        })
        this.$refs.orgShuttleModal.visible = true
        this.$refs.orgShuttleModal.loadData()
      }
    },
    add() {

      this.edit()
    },
    edit(isEdit = {}) {
      this.form.resetFields()
      if (isEdit) {
        getAction(this.url.queryById, { id: isEdit.id }).then((res) => {
          if (res.success) {
            let record = res.result

            this.model = Object.assign({}, record)
            this.model.dataRange = []
            if (this.model.startDate && this.model.endDate) {

              this.model.dataRange[0] = this.model.startDate
              this.model.dataRange[1] = this.model.endDate
            }
            if (this.model.noticeScopes) {
              this.model.noticeScopes.forEach(item => {

                if (item.scopeType == 1) {
                  this.dataSource.push(item)
                } else if (item.scopeType == 2) {
                  this.dataSource2.push(item)
                }
              })
            }
            this.fileList = []
            if (this.model.noticeFiles) {
              this.model.noticeFiles.forEach((item, index) => {
                this.fileList.push({ name: item.fileName, url: item.fileUrl, uid: index })
              })
            }

            let fieldsVal = pick(this.model, 'orderNumber', 'replyMessage', 'title', 'realName', 'userName', 'orderCode', 'customerName', 'customerCode',
              'content', 'feedbackType', 'bpmStatus', 'orgCode', 'orgName', 'createTime')
            this.$nextTick(() => {
              this.form.setFieldsValue(fieldsVal)
            })
          }
        })

      }

    },
    handleDelete(e) {
      if (this.showType) {
        let key = this.dataSource2.map(item => {
          return item.id
        })
        this.dataSource2.splice(key.indexOf(e.id), 1)
      } else {
        let key = this.dataSource.map(item => {
          return item.id
        })
        this.dataSource.splice(key.indexOf(e.id), 1)
      }
    },
    handleUpload(e, e2) {
      this.fileList = e2
    },
    chooseOk(e) {
      let key = this.dataSource.map(item => {
        return item.code
      })
      console.log(e)
      let that = this
      e.forEach(item => {
        if (key.indexOf(item.orgCode) == -1) {
          item.code = item.orgCode
          item.name = item.orgName
          this.dataSource.push(item)
        }
      })

    },
    chooseOk2(e) {
      let key = this.dataSource2.map(item => {
        return item.code
      })
      e.forEach(item => {
        if (key.indexOf(item.customerCode) == -1) {
          item.code = item.customerCode
          item.name = item.customerName
          this.dataSource2.push(item)
        }
      })

    },
    onSelectChange(selectedRowKeys, selectionRows) {
      if (this.showType) {
        this.selectedRowKeys2 = selectedRowKeys
        this.selectionRows2 = selectionRows
      } else {
        this.selectedRowKeys = selectedRowKeys
        this.selectionRows = selectionRows
      }
    },
    handleOk() {
      let that = this

      this.form.validateFields((err, values) => {

        if (!err) {
          that.model.noticeScopes = []
          that.dataSource.forEach(item => {
            that.model.noticeScopes.push({ scopeType: 1, code: item.code, name: item.name })
          })
          that.dataSource2.forEach(item => {
            that.model.noticeScopes.push({ scopeType: 2, code: item.code, name: item.name })
          })

          that.confirmLoading = true
          let formData = Object.assign(that.model, values)

          formData.noticeFiles = []
          that.fileList.forEach(item => {
            formData.noticeFiles.push({ fileName: item.name, fileUrl: item.url })
          })
          // formData.productGroupItems=this.dataSource

          console.log(formData)
          postAction('/feedback/cnFeedback/check', formData).then((res) => {
            if (res.success) {
              that.$message.success(res.message, 2)
              that.$emit('ok')
              that.close()
            } else {
              that.$message.error(res.message, 2)
            }
          }).finally(() => {
            that.confirmLoading = false
          })

        }
      })
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc'
      }
      if (this.ipagination.current !== pagination.current) {
        this.selectionRows = []
        this.selectedRowKeys = []
      }
      this.ipagination = pagination
      // this.loadData()
    },
    handleCancel() {
      this.form.resetFields()
      this.visible = false
      this.fileList = []
      this.confirmLoading = false
      this.dataSource = []
      this.dataSource2 = []
    },
    close() {
      this.handleCancel()
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.ant-col-sm-16-24{
  width: 89.4%;
}
/deep/.ant-col-sm-7-24{
  width: 108.88px;
}
</style>